@font-face {
  font-family: "italipixel";
  src: url(Italipixel.ttf) format("truetype");
}

html{
    scroll-padding-top: 5.5rem;
}

body {
  background-image: linear-gradient(
    to bottom,
    #000000,
    #291e24,
    #4a3748,
    #665473,
    #7b75a3,
    #8b8cbc,
    #9ba4d4,
    #acbced,
    #c5cbf1,
    #dadcf5,
    #eeedfa,
    #ffffff
  );
  background-attachment: fixed;
  font-family: consolas, serif;
  font-size: 14px;
  color: rgb(0, 0, 0);
  line-height: 1.2em;
}

.topheader {
  margin-top: 4px;
  }

h1, h2{
    font-family: italipixel;
    line-height: 1em;
}

a:link {
  font-size: 1.2em;
  color:#4f3dc4;
}

/* visited link */
a:visited {
    color:#4f3dc4;
}

/* mouse over link */
a:hover {
  color: rgb(255, 107, 181);
}

/*The header bar that stays at the top of the screen*/
.top-bar {
  text-transform: uppercase; /*Make the text in the header display as all caps*/
  font-family: italipixel;
  font-size: 4em;
  letter-spacing: 10px;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  background: black;
  color: white;
  padding: 5px;
  padding-left: 20px;
  line-height: 1em;
  overflow: auto;
  text-shadow: #7e71d1 5px 0px;
}

.mid-bar {
  text-transform: uppercase; /*Make the text in the header display as all caps*/
  font-family: italipixel;
  font-size: 3em;
  letter-spacing: 10px;
  color: white;
  margin-left: 470px;
  margin-top: 40px;
  margin-bottom: -15px;
  line-height: 1em;
  text-shadow: #7e71d1 5px 0px;
}

.main,
.main-first {
  margin-top: 30px;
  margin-left: 450px;
  width: 500px;
  border: 3px double black;
  background: rgb(255, 255, 255);
  padding: 15px 25px 15px 25px;
  box-shadow: 15px 15px rgb(0, 0, 0, 0.8);
}

/*Make sure the first main box has an extra top margin so it's not hidden by the header*/
.main-first {
  margin-top: 90px;
}

.sidebar {
  position: fixed;
  width: 350px;
  min-height: 75px;
  border: 1px solid black;
  background: white;
  margin-top: 0px;
  margin-left: 25px;
  /*The 7px is vertical and horizontal offset for the shadow, if you want to change it.*/
  box-shadow: 7px 7px rgb(0, 0, 0, 0.78);
}

/*Prevent image overflow*/
.main img,
.main-first img,
.sidebar img {
  max-width: 100%;
  height: auto;
}

.sidebar-pic {
  /*not in use, currently looks like SHIT*/
  text-align: center;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
  background: black;
  border-radius: 51px;
  padding: 2px;
  border: 0;
}

.sidebar-pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/*Text section in sidebar.*/
.sidebar-description {
  padding: 15px;
}

.sidebar-links {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  background: black;
  color: white;
  width: 100%;
  height: 30px;
}

.button {
  padding: 5px;
  padding-left: 10px;
  display: inline-block;
}

.sidebar-links a {
  color: white;
  text-decoration: none;
}

.sidebar-links a:hover {
  color: #bbb;
}

/*Text at bottom below main divs*/
.footer {
  text-align: right;
  margin-left: 475px;
  width: 500px;
  font-size: 13px;
  font-style: italic;
  margin-top: 20px;
  margin-bottom: 40px;
}


/*For narrow screens*/
@media (max-width: 1100px) {
  .sidebar {
    width: 275px;
    margin-left: 10px;
  }
  .main,
  .main-first {
    width: 420px;
    margin-left: 315px;
  }
  .mid-bar{
        margin-left: 335px;
    }
}

/*Mobile compatibility.*/
@media (orientation: portrait) {

    .mid-bar{
        margin-left: 35px;
        margin-top: 30px;
    }
  .sidebar {
    margin: 0 auto;
    position: static;
    margin-top: 60px;
    margin-bottom: 15px;
    width: 90%;
  }

  .main,
  .main-first {
    margin: 0 auto;
    margin-top: 20px;
    width: 80%;
  }

  .footer {
    width: 80%;
    padding: 5%;
    margin: 0 auto;
  }

  .top-bar {
    font-size: 13.5px;
    letter-spacing: 4px;
    font-size: 90%; /*To help reduce height if it overflows the first line.*/
  }
}